<template>
  <div class="open-graph-div">
    <modal-dialog :width="width" :height="height" @close="$close">
      <div slot="header" class="c-header">{{ title }}</div>
      <div slot="body" class="c-body">
        <div class="upload-container">
          <!--   上传文件   -->
          <el-upload
            ref="upload"
            action
            :limit="1"
            :accept="acceptType"
            :before-upload="onBeforeUpload"
            :auto-upload="false"
            :on-success="onSuccess"
            :on-error="onError"
            :http-request="onHttpRequest"
          >
            <div class="eladmin-upload">
              <i class="el-icon-upload" /> 添加文件
            </div>
            <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div>
          </el-upload>
        </div>
      </div>
      <div slot="footer">
        <el-button type="text" @click.native="onSubmit">确认</el-button>
        <el-button type="text" @click.native="onCancel">取消</el-button>
      </div>
    </modal-dialog>
  </div>
</template>

<script>
import ModalDialog from '@/components/ModalDialog'
import { mapState } from 'vuex'

export default {
  components: {
    ModalDialog
  },
  props: {
    width: {
      type: Number,
      required: false,
      default: 380
    },
    height: {
      type: Number,
      required: false,
      default: 240
    },
    title: {
      type: String,
      required: false,
      default: '打开矿井通风网络图'
    },
    msg: {
      type: String,
      default: '默认欢迎'
    }
  },
  data() {
    return {
      // headers: { Authorization: getToken() },
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      config: 'config'
    }),
    acceptType() {
      return '.json'
    },
    uploadTip() {
      return '支持json格式文件，仅1个且不超过20M'
    }
  },
  methods: {
    // 取消
    onCancel() {
      // 关闭对话框
      this.$close()
    },
    // 确定
    onSubmit() {
      const uploadFiles = this.$refs.upload.uploadFiles
      // console.log(this.$refs.upload)
      if (!uploadFiles || uploadFiles.length < 1) {
        this.$alert('请添加文件!', '提示')
      } else {
        // 上传文件
        this.$refs.upload.submit()
      }
    },
    // https://www.cnblogs.com/rogerwu/p/9274193.html
    // 文件上传
    onBeforeUpload(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const isDWG = extension === 'json'
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isDWG && !isLt2M) {
        this.$message.error('上传失败!')
      }
      this.loading = false
      return isDWG && isLt2M
    },
    onSuccess(response, file, fileList) {
      console.log('上传文件返回状态：', response)
      // // 关闭对话框(带返回值)
      // this.$close(response.vnet)
      // // 清空上传文件列表
      // this.$refs.upload.clearFiles()
    },
    // 监听上传失败
    onError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    },
    // 上传文件
    onHttpRequest(param) {
      console.log('onHttpRequest:', param)
      if (!param || !param.file) {
        this.$alert('上传参数错误!', '提示')
        return
      }
      const layout = { ...this.config.layout }
      // ortho1--表示正交分支不合并; ortho2--表示正交分支部分线段会合并
      let splines = layout.splines
      if (splines === 'ortho1' || splines === 'ortho2') {
        splines = 'ortho'
      }
      layout['splines'] = splines
      // 是否需要自动布局
      layout['needlayout'] = 0
      // 上传的数据文件
      layout['file'] = param.file
      // 关闭对话框并返回布局参数对象
      this.$close(layout)
    }
  }
}
</script>

<style lang="scss">
.open-graph-div {
  // .dialog-header {
  //   .c-header {
  //     font-size: 16px;
  //     text-align: center;
  //   }
  // }
  .dialog-body {
    // @import '../../style/form.scss';
    .c-body {
      padding: 10px 10px !important;

      @import '../../style/form.scss';
      .upload-container {
        width: 85%;
        text-align: center;
        margin: 20px auto;

        // .el-upload {
        //   background-color: rgba(25, 41, 56, 1) !important;
        // }
        .eladmin-upload {
          margin: 0 auto !important;
        }
      }
    }
  }
  .dialog-footer {
    @import '../../style/form.scss';
    .el-button {
      font-size: 16px !important;
    }
  }
}
</style>
